<template>
  <div id="StudentPlan">
    <div class="select-box" :class="isXiDingShow ? 'xidingselect' : ''">
      <el-select
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
        no-data-text="暂无数据"
        @change="provinceChange"
        v-model="studentPlanSelectedData.selecttextDX6"
        placeholder=" "
        style="width: 90px; margin: 0 10px"
      >
        <el-option
          v-for="item in studentPlanSelectedData.popArrDX6"
          :key="item.id"
          :label="item.provinceName"
          :value="item.provinceCode"
        />
      </el-select>
      <!-- 年份 -->
      <el-select
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
        no-data-text="暂无数据"
        v-model="planPopArrDXData.selecttextDX6"
        placeholder=" "
        @change="yearChange"
        style="width: 90px"
      >
        <el-option
          v-for="item in planPopArrDXData.popArrDX6"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>

      <el-select
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
        no-data-text="暂无数据"
        @change="subjectChange"
        v-model="planPopArrDXData.selecttextDX7"
        placeholder=" "
        style="width: 90px; margin: 0 10px"
      >
        <el-option
          v-for="item in planPopArrDXData.popArrDX7"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>

      <el-select
        :popper-options="{
          modifiers: [{ name: 'computeStyles', options: { adaptive: false } }],
        }"
        no-data-text="暂无数据"
        v-model="planPopArrDXData.selecttextDX8"
        placeholder=" "
        @change="levelChange"
        style="width: 90px"
      >
        <el-option
          v-for="item in planPopArrDXData.popArrDX8"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </div>
    <div class="page-content-list">
      <div class="mb20">
        <!-- style="
            height: 36px;
            position: sticky;
            top: 116px;
            left: 0;
            background: #fff;
          " -->
        <div :class="isXiDingShow ? 'xidingtable-title' : ''">
          <!-- style="top: 164px; width: 1160px" -->
          <table class="my-table head">
            <thead class="my-table-head">
              <th width="80">代码</th>
              <th class="text-left pl20">专业名称</th>
              <!---->
              <th width="80">选科</th>
              <!---->
              <!-- <th width="100">选考要求</th> -->
              <th width="80">学制</th>
              <th width="80">学费</th>
              <th width="80">招生人数</th>
            </thead>
          </table>
        </div>

        <table class="my-table body">
          <tbody class="my-table-body">
            <tr v-for="item in studentPlanData" :key="item.id">
              <td
                width="80"
                class="text-center"
                :class="item.dataType == 'c' ? 'isHeader' : ''"
              >
                <span class="cntext">{{ item.code || '-' }}</span>
              </td>
              <td
                class="pt20 pb20 pl20"
                :class="item.dataType == 'c' ? 'isHeader' : ''"
              >
                <div class="cntext f14">{{ item.text || '-' }}</div>
                <div class="cntext f12">{{ item.remark || '-' }}</div>
              </td>
              <!-- <td width="80" class="text-center">
                <span class="cntext">{{ item.chooseSubjectText || "-" }}</span>
              </td> -->
              <td
                width="80"
                class="text-center"
                :class="item.dataType == 'c' ? 'isHeader' : ''"
              >
                <span class="cntext">{{ item.chooseSubjectText || '-' }}</span>
              </td>
              <td
                width="80"
                class="text-center"
                :class="item.dataType == 'c' ? 'isHeader' : ''"
              >
                <span class="cntext">{{ item.learnYear || '-' }}</span>
              </td>
              <td
                width="80"
                class="text-center"
                :class="item.dataType == 'c' ? 'isHeader' : ''"
              >
                <span class="cntext">{{ item.cost || '-' }}</span>
              </td>
              <td
                width="80"
                class="text-center"
                :class="item.dataType == 'c' ? 'isHeader' : ''"
              >
                <span class="cntext">{{ item.planNum || '-' }}</span>
              </td>
            </tr>
          </tbody>
        </table>

        <div
          v-if="studentPlanData.length <= 0"
          style="text-align: center; color: #909399e0; margin-top: 50px"
          class="f14"
        >
          暂无数据
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const emits = defineEmits([
  'updatePlanYear',
  'updatePlanSubject',
  'updatePlanLevel',
]);
const {
  studentPlanData,
  planPopArrDXData,
  studentPlanSelectedData,
  isXiDingShow,
} = defineProps({
  studentPlanData: {
    type: Array,
    default: () => [],
  },
  planPopArrDXData: {
    type: Object,
    default: () => {},
  },
  studentPlanSelectedData: {
    type: Object,
    default: () => {},
  },
  isXiDingShow: {
    type: Boolean,
    default: () => false,
  },
});

const provinceChange = (val) => {
  emits('updatePlanProvince', val);
};

const yearChange = (val) => {
  emits('updatePlanYear', val);
};
const subjectChange = (val) => {
  emits('updatePlanSubject', val);
};
const levelChange = (val) => {
  emits('updatePlanLevel', val);
};
</script>

<style lang="scss" scoped>
.xidingselect {
  position: fixed;
  width: 100%;
  background-color: #fff;
  top: 170px;
  z-index: 999;
}

.xidingtable-title {
  margin-top: 80px;
}

.my-tab {
  position: sticky;
  top: 45px;
  left: 0;
  padding-bottom: 10px;
  background: #fff;
  z-index: 999;
}

.my-table {
  width: 100%;
  border-right: 1px solid #e8e8e8;
  border-top: 1px solid #e8e8e8;
  border-collapse: collapse;
  border-spacing: 0;
}

.my-table-head {
  border-left: 1px solid #e8e8e8;
  width: 100%;
}

.my-table .my-table-head th {
  border-bottom: 1px solid #e8e8e8;
  padding: 9px 0;
  font-size: 12px;
  color: #86909c;
}

.my-table .my-table-body td {
  font-size: 12px !important;
  border-left: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  color: #333;
}

.text-left {
  text-align: left !important;
}

.my-select {
  // position: sticky;
  // top: 85px;
  // left: 0;
  background: #fff;
  padding: 20px 0;
}

.body {
  border-top: none;
}

.select-box {
  //   position: sticky;
  //   top: 45px;
  //   left: 0;
  //   background: #fff;
  padding: 20px 0;
}

.active {
  color: red;
}

.isHeader {
  background-color: #f0f0f0;
  font-weight: bold;
}

.pt20 {
  padding-top: 20px;
}

.pb20 {
  padding-bottom: 20px;
}

.pl20 {
  padding-left: 20px;
}
</style>
